import { Form, Button, Row, Col } from 'antd';
import { MinusCircleOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons';
import './index.less';
import GlobalFormItem from './GlobalFormItem';

const DynamicFieldSet = ({ name, listFormSet, hasHead = false, hasAdd = true, hasDel = true }) => {

  return (
    <Form.List name={name}>
      {(fields, { add, remove }) => {
        return (
          <div>
            {
              hasHead && (
                <Row className="dynamic-header">
                  <Col flex={1}>
                    <Row gutter={8}>
                      {
                        listFormSet.map((itemSet) => {
                          const { layoutProps = {} } = itemSet;
                          const column = listFormSet.length;
                          const span = layoutProps.span === undefined ? 1 : Math.min(layoutProps.span, column); // 列占比数
                          const colSpan = Math.ceil(24 / column) * span;
                          return <Col span={colSpan} key={itemSet.name} className="dynamic-header-cell">{itemSet.label}</Col>
                        })
                      }
                    </Row>
                  </Col>
                  {
                    hasDel &&
                    <Col flex="none" style={{ width: '80px' }} className="dynamic-header-cell"></Col>
                  }
                </Row>
              )
            }

            {fields.map((field, i) => (
              <Row key={field.key} gutter={4} className={hasHead ? "dynamic-tr" : ''}>
                <Col flex={1}>
                  <Row gutter={8}>
                    {
                      listFormSet.map((itemSet) => {
                        const { name } = itemSet;
                        itemSet = {
                          ...itemSet,
                          name: [field.name, name],
                          fieldKey: [field.fieldKey, name],
                          layoutProps: {
                            colon: false,
                            wrapperCol: { span: 24 },
                            ...itemSet.layoutProps,
                          },
                          label: ''
                        }
                        return <GlobalFormItem key={`${field.fieldKey}_${name}`} itemSet={itemSet} column={listFormSet.length} />
                      })
                    }
                  </Row>
                </Col>

                {/* 删除按钮 */}
                {
                  hasDel &&
                  <Col flex="none" className="dynamic-header-cell" >
                    <div style={{ width: '80px' }}>
                      <MinusCircleOutlined
                        className="dynamic-delete-button"
                        style={{ margin: '0 8px' }}
                        onClick={() => {
                          remove(field.name);
                        }}
                      />
                    </div>
                  </Col>
                }
              </Row>
            ))}

            {/* 新增按钮 */}
            {
              hasAdd &&
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  style={{ width: '60%', marginLeft: hasHead ? '20%' : '' }}
                >
                  <PlusOutlined /> 新增
              </Button>
              </Form.Item>
            }

          </div>
        );
      }}
    </Form.List>
  );
};

export default DynamicFieldSet;